@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

.nav_center ul li .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.nav_center ul li:hover .arrow {
  animation: rotate 0.3s forwards;
}
.nav_center ul li .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.nav_center ul li:hover .arrow {
  transform: rotate(180deg);
}
.nav_header{
    width: 100%;
    height: 100%;
    display: flex;
    .nav_left{
        width: 10%;
        height: 100%;
        // background-color: cadetblue;
        
        img{
            width: 130px;
            height: 56px;
             padding-top: 6px;
             margin-left: 30px;
        }
    }
    .nav_center{
        width: 40%;
        height: 70px;
        // background-color: darkblue;
        line-height: 70px;
        display: flex;
        ul{
            li{
                float: left;
                margin-left: 30px;
                position: relative;
                .dandan{
                    position: absolute;
                     height: 500px;
                     width: 850px;
                    left: 0;
                    top: 70px;
                    background-color: white;
                    border-radius: 20px;
                    
                     visibility: hidden; /* 初始状态 */
                            opacity: 0;
                            transition: opacity 0.3s ease, visibility 0.3s ease;
                    .name{
                        color: #000;
                    }
                }
                  &:hover .dandan {
                           visibility: visible; /* 显示 */
                            opacity: 1; /* 渐变为不透明 */
                        }
                .arrow{
                    transition: transform 0.3s ease
                }
            }
           
        }
        li:hover{
            color: orange;
        }
        .seach{
            margin-top: 15px;
            width: 380px;
            height: 34px;
            border: 1px solid #ccc;
            margin-left: 40px;
            border-radius: 5px;
            font-size: 12px;
            display: flex;
            line-height: 34px;
            // align-items: center;
        }
    }
    .nav_right{
        width: 50%;
        height: 100%;
        // background-color: darkgreen;
        font-size: 14px;
        display: flex;
        align-items: center;
        ul{
            margin-left: 270px;
            
            li{
                float: left;
                display: flex;
                align-items: center;
                margin-left: 30px;
                img{
                    width: 24px;
                    height: 27px;
                }
                
            }
            li:hover{
                color: orange;
            }
             
            }
            .user{
                width: 200px;
                height: 100%;
                display: flex;
                align-items: center;
                line-height: 10px;
                font-size: 16px;
                margin-left: 20px;
                img{
                   width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    margin-left: 30px;
                }
                .bold{
                    float: right;
                    line-height: 40px;
                }
                 .tou{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    margin-left: 30px;
                    
                    
                    }
                    .bold:hover{
                            font-weight: bold;
                            color: #000;
                    }
            }
           
       
    }
}